<!--The content below is only a placeholder and can be replaced.-->

<div class="page bg">
<!--       <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
          <span class="icon icon-left"></span>
          返回
        </a>
        <h4 class="title">{{ title }}!</h4>
      </header> -->
      <!-- <nav class="bar bar-tab">
        <a class="tab-item active" href="#">
          <span class="icon icon-home"></span>
          <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="#">
          <span class="icon icon-me"></span>
          <span class="tab-label">我</span>
        </a>
        <a class="tab-item" href="#">
          <span class="icon icon-star"></span>
          <span class="tab-label">收藏</span>
        </a>
        <a class="tab-item" href="#">
          <span class="icon icon-settings"></span>
          <span class="tab-label">设置</span>
        </a>
      </nav> -->
        <div class="content">
            <!-- 这里是页面内容区，start -->
            <div id="first-page" *ngIf="pageOneShow">
                <div style="text-align: center;">
                  <h1 class="animated tada" id="dowebok">欢迎来到选课系统</h1>
                </div>
                <div style="width:60%; margin: 0 auto;">
                  <div class="animated bounceIn" id="dowebok2">
                    <img style="width:90%;" src="../xkweb/assets/img/1.png">
                  </div>
                </div>
                 <p id="jq22" class="animated slideInRight txt-center">
                    请输入工号
                 </p>
                <div id="jq23" class="animated slideInRight" style="width: 50%; margin: 0 auto; text-align: center;">
                    <div class="form-group">
                        <input type="text" class="form-control"
                            [(ngModel)]="code" name="code" 
                            (ngModelChange)="reCheck()"
                            placeholder="code">
                    </div>
                </div>
                <div id="jq24" class="animated slideInRight" style="width: 50%; margin: 0 auto; text-align: center;">
                    <div class="form-group">
                        <button type="button" class="btn btn-success" style="width: 100%;" 
                            (click)="onSubmit(code)">确定</button>
                    </div>
                </div>
                <!-- alert -->
                <p id="jq26" class="alert-p txt-center animated flipInX" *ngIf="codeError"><i class="glyphicon glyphicon-warning-sign"></i> {{ message}}</p>

                <p id="jq25" class="p-p animated flipInX"> 本系统是一个自动化选课系统，方便教师登录和选择合适课程。系统最终解释权归属于上海体院xxx公司。</p>
            </div>

            <!-- <div id="container-cube" >
             <div id="stage">
               <div id="shape" class="cube backface">
                  <div class="plane one"></div>
                  <div class="plane two"></div>
                  <div class="plane three"></div>
                  <div class="plane four"></div>
                  <div class="plane five"></div>
                  <div class="plane six"></div>
               </div>
             </div>
            </div> -->
            <!-- first,end -->
            <!-- second, start -->
            <div id="second-page" *ngIf="pageTwoShow">
                <div class="txt-center">
                    <h4 class="back" (click)="back('one')"><i class="glyphicon glyphicon-chevron-up"></i>返回</h4>
                </div>
                <div class="txt-center bg-title animated slideInLeft">
                    <h3 class="animated slideInRight" id="dowebok-h">登录成功</h3>
                </div>
                <p class="p-sec animated slideInLeft">欢迎<i class="glyphicon glyphicon-pawn"></i><strong class="color1">{{getUser()}}</strong>老师</p>
                <p class="p-sec animated slideInLeft">你可选的课程有:</p>
                <div id="bg-tasks" class="animated slideInLeft">
                    <div *ngFor="let data of tasks" 
                        [ngClass]="{'actived': activeId == data.id }"
                        (click)="selectLesson(data.id)"
                        class="bg-select">
                        <div id="lesson1" class="lesson">{{data.lesson.name}}</div>
                        <div class="lesson-des">
                            <div><span class="letter">{{data.startDate }}</span>-
                            <span class="letter">{{data.endDate}}</span>
                            </div>
                            <div class="letter">{{data.community.name}}</div> 
                          </div>
                    </div>
              </div>
              <!-- alert -->
                <p id="jq26" class="alert-p txt-center animated flipInX" *ngIf="selectError"><i class="glyphicon glyphicon-warning-sign"></i> {{ message}}</p>
<!--               <div>
                <button type="button " id="submitLesson" class="btn btn-default"
                    (click)="submitLesson()">提交</button>
              </div> -->
<!--               <alert type="warning">
                  <strong>Warning!</strong>{{message}}
              </alert> -->
            </div>
            <!-- seconde , end -->
            <!-- third , start -->

            <!--third , end  -->
            <div id="third-page" *ngIf="false">
                <div class="txt-center bg-title animated slideInLeft">
                    <h3 class="animated slideInRight" id="dowebok-h">已选课程</h3>
                </div>
                <p class="p-sec">你已经选的课程有:</p>
                <div id="bg-tasks">
                    <div *ngFor="let data of tasksSelected" 
                        class="bg-select">
                        <div id="lesson1" class="lesson">{{data.lesson.name}}</div>
                        <div class="lesson-des">
                            <div><span class="letter">{{data.startDate }}</span>-
                            <span class="letter">{{data.endDate}}</span>
                            </div>
                            <div class="letter">{{data.community.name}}</div> 
                          </div>
                    </div>
                </div>
            </div>
<!-- selectSuccess -->
<div class="modalWin" *ngIf='selectSuccess'>
  <p>{{message}}</p>
  <p>3s后自动跳转到第一页</p>
</div>
           <!-- 这里是页面内容区，end -->
      </div>
</div>

